<template>
  <a-modal :open="open" width="900px" title="用血申请单" centered :keyboard="false" :ok-button-props="{ disabled: !isCompleted }" @ok="onOk" @cancel="onCancel">
    <a-form :model="formState" class="w-full" :colon="false" :label-col="{ style: { width: '78px' } }">
      <a-form-item label="姓名" name="brName" v-bind="validateInfos.brName">
        <SelectTable v-model:value="formState.brName" type="用血申请患者" placeholder="患者姓名/助记码" @select="(row) => onSelect(row)" />
      </a-form-item>
    </a-form>
    <div style="margin-left: 76px">
      <div class="card-box flex flex-wrap justify-between">
        <a-card class="card-item active" :body-style="{ padding: 0 }" hoverable>
          <div class="item-header">
            <div class="flex-1 ml-5 flex justify-between items-center">
              <LabelValue label="姓名" :width="140" :value="userData?.brName" />
              <LabelValue label="性别" :width="80" :value="userData?.brXb" />
              <LabelValue label="年龄" :width="80" :value="userData?.brAge" />
              <template v-if="userData.appPath === 1">
                <LabelValue label="床位号" :width="120" :value="userData?.bedCode" />
                <LabelValue label="病区" :width="120" :value="userData?.wardName" />
                <LabelValue label="住院号" :width="120" :value="userData?.inpRecordCode" />
              </template>
              <template v-else>
                <LabelValue label="科室" :width="120" :value="userData?.deptName" />
                <LabelValue label="医生" :width="120" :value="userData?.empName" />
                <LabelValue label="卡号" :width="120" :value="userData?.brId" />
              </template>
            </div>
          </div>
        </a-card>
      </div>
    </div>
    <div class="flex mt-4">
      <a-form class="form-style-flex" :model="formState">
        <a-form-item label="受血者血型" class="w-1/2">
          <SelectItem v-model:value="formState.bldTypeCode" type="DT00006" trigger="focus" placeholder="请选择" />
        </a-form-item>
        <a-form-item label="RH血型" class="w-1/2">
          <SelectItem v-model:value="formState.bldTypeRhCode" type="DT00007" trigger="focus" placeholder="请选择" />
        </a-form-item>
        <a-form-item label="用血方式" class="w-full">
          <SelectItem v-model:value="formState.transfusionCode" type="DT00296" trigger="focus" placeholder="请选择" />
        </a-form-item>
        <a-form-item label="血液成分" class="w-1/2">
          <SelectItem v-model:value="formState.bldComponentCode" type="DT00295" trigger="focus" placeholder="请选择" />
        </a-form-item>
        <a-form-item label="用血量" class="w-1/2">
          <a-input-number v-model:value="formState.transfusionVolume" class="w-full" suffix="ml" placeholder="请输入" />
        </a-form-item>
        <a-form-item label="诊断及输血适应症" class="w-full">
          <a-textarea v-model:value="formState.diagnosis" :rows="3" placeholder="请输入" />
        </a-form-item>
        <a-form-item label="输血反应及输血禁忌症" class="w-full">
          <a-textarea v-model:value="formState.contraindication" :rows="3" placeholder="请输入" />
        </a-form-item>
        <a-form-item label="申请科室" class="w-1/2">
          <SelectSection v-model:value="formState.appDeptCode" class="h-full allot" placeholder="请输入" />
        </a-form-item>
        <a-form-item label="申请日期" class="w-1/2">
          <a-date-picker v-model:value="formState.appDate" format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
        </a-form-item>
      </a-form>
    </div>
  </a-modal>
</template>

<script setup>
import { ref, watch } from 'vue'
import { message } from 'ant-design-vue'
import SelectTable from '@/components/SelectTable'
import { post } from '@/utils/request'

const props = defineProps({
  open: Boolean,
  rowData: {
    type: Object,
    default: () => ({})
  }
})
const formState = ref({})
const userData = ref({})
const emit = defineEmits(['update:open', 'success'])
const rulesState = ref({
  brName: [{ required: true, message: '请选择' }]
})
const { isCompleted, validateInfos } = useForm(formState, rulesState)

const onSelect = (row) => {
  userData.value = { ...row }
  formState.value.brName = row?.brName
}

const onOk = async () => {
  const { code, msg } = await post('/bloodm/BldTransfusionRecord/doSaveBldTransfusionApply', {
    ...formState.value,
    ...userData.value
  })
  if (code !== 0) return message.error(msg)
  message.success(msg)
  emit('update:open', false)
  emit('success')
  onReset()
}

const onReset = () => {
  formState.value = {}
  userData.value = {}
}

const onCancel = () => {
  onReset()
  emit('update:open', false)
}
watch(
  () => props.open,
  (val) => {
    if (val) {
      formState.value = { ...props.rowData }
      userData.value = { ...props.rowData }
    }
  }
)
</script>
<style lang="less" scoped>
.card-box {
  overflow: hidden auto;
  .card-item {
    width: 100%;
    height: fit-content;
    &.active {
      border: 1px solid var(--primary-color);
      .item-header {
        color: #fff;
        background-color: var(--primary-color);
        .font-semibold {
          font-size: 18px;
        }
      }
    }
    .item-header {
      position: relative;
      display: flex;
      padding: 12px;
      background-color: #00000010;
    }
  }
}
</style>
